// 引入公共样式 媒体查询
@import "common.less";
@bg:#F7F7F7;
@fontsize:50;
body{
    min-width: 320px;
    width:15rem;
    margin: 0 auto;
    -webkit-tap-highlight-color: transparent;
    background: #fff;
    overflow-x: hidden;
}
a{
    text-decoration: none;
}
// 头部
header{
    height: (80rem / @fontsize);
    overflow: hidden;
    .header{
        height: (48rem / @fontsize);
        margin-top: (16rem / @fontsize);
        section{
            float: left;
        }
        .logo{
            width: (144rem / @fontsize);
            height: (48rem / @fontsize);
            background:url(../images/logo.png) no-repeat;
            background-size: 100% auto;
            margin-right: (238rem / @fontsize);
            margin-left: (30rem / @fontsize);
        }
        .search{
            width: (38rem / @fontsize);
            height: (38rem / @fontsize);
            margin: (5rem / @fontsize) 0;
            background: url(../icons/search.png) no-repeat;
            background-size: 100% auto;
        }
        .login{
            width: (48rem / @fontsize);
            height: (48rem / @fontsize);
            background: #dbdbdb;
            text-align: center;
            line-height: (48rem / @fontsize);
            font-size: (15rem / @fontsize);
            border-radius: 50%;
            font-weight: bold;
            color: #FF9F00;
            margin-left:(48rem / @fontsize);
        }
        .download{
            width: (143rem / @fontsize);
            height: (48rem / @fontsize);
            font-size:(25rem / @fontsize) ;
            text-align: center;
            line-height: (48rem / @fontsize);
            color: #fff;
            background: #FF9F00;
            border-radius: (6rem / @fontsize);
            margin-left: (41rem / @fontsize);
        }
    }
}
// 导航
nav{
    .nav_content{
        display: flex;
        justify-content: space-around;
        .nav_item{
            font-size: (28rem / @fontsize);
            padding: (20rem / @fontsize) 0;
            color: #6B6B6B;
            cursor: pointer;
            &:nth-child(1){
                color: #FF9F00!important;
                border-bottom: (3rem / @fontsize) solid #FF9F00;
            }
        }
    }
}
// banner轮播
.banner{
    width: (714rem / @fontsize);
    margin: (15rem / @fontsize) auto;
    overflow: hidden;
    position: relative;
    .swiper-slide img {
        display: block;
        width: 100%;
        height: 100%;
        border-radius: (5rem / @fontsize);
    }
}
// 十个导航模块
.tenlist{
    width: (712rem / @fontsize);
    background: @bg;
    border-radius: (8rem / @fontsize);
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    padding-bottom:(31rem / @fontsize);
    box-sizing: border-box;
    .tenlist_content{
        width: 20%;
        margin-top:(29rem / @fontsize) ;
        a{
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            img{
                width: (78rem / @fontsize);
                height: (78rem / @fontsize);
            }
            span{
                font-size: (24rem / @fontsize);
                margin-top: (12rem / @fontsize);
                color: #6B6B6B;
            }
        }
    }
}
.hot{
    width: (712rem / @fontsize);
    background: @bg;
    margin: (18rem / @fontsize) auto 0  auto;
    padding-bottom: (25rem / @fontsize);
    border-radius: (8rem / @fontsize);
    .hot_content{
        padding: (30rem / @fontsize) 0;
        display: flex;
        .hot_item{
            width: (118rem / @fontsize);
            height: (44rem / @fontsize);
            font-size: (22rem / @fontsize);
            text-align: center;
            line-height: (44rem / @fontsize);
            border-radius: (22rem / @fontsize);
            border:(2rem / @fontsize) solid #6B6B6B;
            margin-left: (30rem / @fontsize);
            &:nth-child(1){
                margin-left: (12rem / @fontsize);
                color: #FF9F00;
                border-color: #FF9F00;
            }
        }
    }
    .hot_publish{
        display: flex;
        justify-content: space-between;
        .hot_publish_item{
            width: (348rem / @fontsize);
            a{
                width: 100%;
                height: (196rem / @fontsize);
                display: block;
                position: relative;
                .hot_img{
                    width: 100%;
                    height: 100%;
                }
                .hot_bg{
                    width: 100%;
                    position: absolute;
                    bottom:0 ;
                    left: 0;
                }
                .hot_watch{
                    position: absolute;
                    bottom: 0;
                    width: 100%;
                    padding: (10rem / @fontsize);
                    box-sizing: border-box;
                    display: flex;
                    justify-content: space-between;
                    .hot_watch_item{
                        display: flex;
                        height: (27rem / @fontsize);
                        line-height: (27rem / @fontsize);
                        img{
                            width: (31rem / @fontsize);
                            height: (27rem / @fontsize);
                            display: block;
                        }
                        span{
                            font-size: (24rem / @fontsize);
                            margin-left: (8rem / @fontsize);
                            color: #FFFFFF;
                        }
                    }
                }
            }
            .hot_txt{
                font-size: (24rem / @fontsize);
                color: #000;
                margin:0;
                padding-top: (16rem / @fontsize);
            }
        }
    }
}
// opuscule
.opuscule{
    width: (712rem / @fontsize);
    height: (234rem / @fontsize);
    margin: (18rem / @fontsize) auto;
    background: @bg;
    .opuscule_content{
        height: (76rem / @fontsize);
        padding-bottom: (21rem / @fontsize);
        padding-top: (20rem / @fontsize);
        padding-left: (20rem / @fontsize);
        padding-right: (35rem / @fontsize);
        position: relative;
        &:nth-child(1){
            border-bottom: (1rem / @fontsize) solid #E6E6E6;
        }
        .opuscule_item{
            height: (76rem / @fontsize);
            position: relative;
            top: 0;
            .opuscule_left{
                width: (76rem / @fontsize);
                height: (76rem / @fontsize);
                display: block;
                position: absolute;
            }
            p{
                margin: 0;
                padding: 0;
                font-size:(24rem / @fontsize);
                position: absolute;
                left: (90rem / @fontsize);
                white-space: nowrap;
            }
            .title1{
                top: 0;
                color: #FF9F00;
            }
            .title2{
                bottom: 0;
            }
            .opuscule_right{
                width: (44rem / @fontsize);
                height: (44rem / @fontsize);
                position: absolute;
                right: 0;
                top: (18rem / @fontsize);
            }
        }
    }
}
// 最近在看
.lately{
    width: (712rem / @fontsize);
    padding-bottom: (15rem / @fontsize);
    background: @bg;
    margin: 0 auto;
    .lately_title{
        padding:(24rem / @fontsize) (15rem / @fontsize) ;
        display: flex;
        justify-content: space-between;
        .lately_item1{
            font-size: (32rem / @fontsize);
        }
        .lately_item2{
            font-size: (24rem / @fontsize);
            color: #B9B9BD;
        }
    }
    .lately_banner{
        overflow: hidden;
        .swiper-slide {
            text-align: center;
            font-size: (24rem / @fontsize);
            color: #000;
            /* Center slide text vertically */
            display: -webkit-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
            flex-direction: column;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            -webkit-justify-content: center;
            justify-content: center;
            -webkit-box-align: center;
            -ms-flex-align: center;
            -webkit-align-items: center;
            align-items: center;
            span{
                margin-top: (15rem / @fontsize);
            }
        }
        .swiper-slide img {
            display: block;
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    }
}
// 夏令营
.summercamp_content{
    padding-bottom: (10rem / @fontsize);
}
.summercamp{
    margin-bottom: (22rem / @fontsize);
}
// 底部导航
footer{
    width: (750rem / @fontsize);
    height: (100rem / @fontsize);
    background: #fff;
    position: fixed;
    bottom: 0;
    z-index: 999;
    display: flex;
    a{
        flex: 1;
        color: #000000;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        &:nth-child(3) img{
            width: (77rem / @fontsize);
            height: (77rem / @fontsize);
        }
        img{
            width:(37rem / @fontsize);
            height:(37rem / @fontsize);
        }
        span{
            font-size: (24rem / @fontsize);
            margin-top: (8rem / @fontsize);
        }
    }
}